<template>
  <div>
    <p class="zuixin">
      最新上架&nbsp;&nbsp;<i class="iconfont icon-youjiantou"></i>
    </p>
    <div class="dis">
      <dl>
        <dt class="heiyuan">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0818%252F190fc549j00qy056g0016c000hs00hsc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633770019&t=0e4b21586b8fa013ceb10a3ad6995cbf"
            alt=""
          />
        </dt>
        <dd>
          <p>CODE LOVE</p>
          <p class="red">￥18</p>
        </dd>
      </dl>
      <dl>
        <dt class="heiyuan">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0818%252F190fc549j00qy056g0016c000hs00hsc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633770019&t=0e4b21586b8fa013ceb10a3ad6995cbf"
            alt=""
          />
        </dt>
        <dd>
          <p>易斯</p>
          <p class="red">￥5</p>
        </dd>
      </dl>
      <dl>
        <dt class="heiyuan">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0818%252F190fc549j00qy056g0016c000hs00hsc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633770019&t=0e4b21586b8fa013ceb10a3ad6995cbf"
            alt=""
          />
        </dt>
        <dd>
          <p>八月还没结束</p>
          <p class="red">￥2</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.icon-youjiantou {
  font-size: 0.4rem;
  vertical-align: middle;
  font-weight: bold;
}
.zuixin {
  height: 0.8rem;
  line-height: 0.8rem;
  margin-left: 0.3rem;
  font-weight: bold;
  font-size: 0.3rem;
}
dd {
  margin-top: 0.2rem;
  margin-left: -0.38rem;
}
.red {
  color: red;
}

dl {
  margin-left: 0.5rem;
}
img {
  /* width: 100%; */
  height: 1.96rem;
  position: absolute;
  z-index: 9;
  right: 0.3rem;
  border-radius: 0.1rem;
}
.dis {
  display: flex;
  justify-content: space-evenly;
}
.heiyuan {
  width: 1.83rem;
  height: 1.83rem;
  background-color: #000;
  border-radius: 0.9rem;
  position: relative;
}
</style>